
<template>
    <div class="hasInviteParticipantsBox">
        <!-- 搜索栏 start-->
        <div class="invite-sub">
            <img class="invite-logo" src="../../static/image/icon-title.png" alt="">
            <span class="inviteSearch">
              <input type="text" placeholder="搜索">
                <img src="../../static/image/sousuo.png" alt="">
            </span>
        </div>
        <!-- 搜索栏 end-->
        <!-- 导航跳转栏 start-->
        <adminHeader></adminHeader>
        <!-- 导航跳转栏 end-->
        <!-- header start-->
        <div class="public-header">
            <div class="public-header-ch">已接受邀请学员</div>
            <div class="public-header-en">TRAINEE</div>
            <div class="public-header-line"></div>
        </div>
        <!-- header end-->
        <!-- 学员列表 start-->
        <div class="studentLists">
            <!-- 学员列表详情 start-->
            <div class="studentItems">
                <div class="studentItem" v-for="(stuList,index) in stuLists" :key="index">
                    <table>
                        <thead>
                            <tr>
                                <th></th>
                                <th>姓名</th>
                                <th>手机</th>
                                <th>性别</th>
                                <th>部门/子部门</th>
                                <th>职位</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- <tr v-for="(stuData,stuIndex) in stuList.stuDatas" :key="stuIndex" :data-id="stuData.courseId">
                                <td>学员{{stuIndex+1}}</td>
                                <td>{{stuData.name}}</td>
                                <td>{{stuData.inviteMemberMobile}}</td>
                                <td>{{stuData.gender}}</td>
                                <td>{{stuData.department}}</td>
                                <td>{{stuData.position}}</td>
                            </tr> -->
                            <tr v-for="(member,sindex) in stuList" :key="sindex">
                                <td>学员{{index+sindex}}</td>
                                <td>{{member.name}}</td>
                                <td>{{member.inviteMemberMobile}}</td>
                                <td>{{member.gender}}</td>
                                <td>{{member.department}}</td>
                                <td>{{member.position}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 学员列表详情 end-->
            <div class="itemSure">
                <!-- <el-button><img src="../../static/image/icon-sign.png" alt="">邀 请</el-button> -->
                <router-link :to="{name:'initiate-invitation-page'}"><img src="../../static/image/icon-sign.png" alt="">确 定</router-link>
            </div>
        </div>
        <!-- 学员列表 end-->
    </div>
</template>
<script>
    // 引用 nav 组件 
    import adminHeader from '../components/adminHeader.vue';
    export default {
        components:{
            adminHeader:adminHeader
        },
        data() {
            return {
                tname:'姓名',
                tphone:'手机',
                tgender:'性别',
                tdepartment:'部门/子公司',
                tpostition:'职位',
               //学员列表详情
                // stuLists:[
                //     {
                //         stuDatas:[
                //             {
                //                 number:'学员1',
                //                 name:'稳如兰',
                //                 phone:'1253667',
                //                 sex:'男',
                //                 subsidiary:'子公司',
                //                 position:'ceo', 
                //             },
                //             // {
                //             //     number:'学员1',
                //             //     name:'稳如兰',
                //             //     phone:'1253667',
                //             //     sex:'男',
                //             //     subsidiary:'子公司',
                //             //     position:'ceo', 
                //             // },
                //         ],
                //     },
                    
                // ],
                stuLists:[
                    // 第一组
                    [
                        {
                            name:'稳如兰',
                            inviteMemberMobile:'1253667',
                            gender:'男',
                            department:'子公司',
                            position:'ceo', 
                        },
                        {
                            name:'稳如兰',
                            inviteMemberMobile:'1253667',
                            gender:'男',
                            department:'子公司',
                            position:'ceo',  
                        },
                        {
                            name:'稳如兰',
                            inviteMemberMobile:'1253667',
                            gender:'男',
                            department:'子公司',
                            position:'ceo', 
                        },
                    ],
                    // 第二组
                    [
                        {
                            name:'稳如兰',
                            inviteMemberMobile:'1253667',
                            gender:'男',
                            department:'子公司',
                            position:'ceo', 
                        },
                        {
                            name:'稳如兰',
                            inviteMemberMobile:'1253667',
                            gender:'男',
                            department:'子公司',
                            position:'ceo', 
                        },
                        {
                            name:'稳如兰',
                            inviteMemberMobile:'1253667',
                            gender:'男',
                            department:'子公司',
                            position:'ceo', 
                        },
                    ],
                ],
            };
        },
        methods: {
            //已接受邀请名单
            getAllData:function(){
                let data = {
                    courseId:this.$route.params.courseId,
                }
                console.log(data)
                console.log("************************")
                this.$http.invitedMember(data,(res)=>{
                    if(res.errCode == 0){
                        // 所有数据
                        let allData = res.data
                        // 
                        // let grouping = new Array();
                        // 处理数据的数组
                        // let Arrdata = new Array();
                        // 循环接口的数据 
                        // for(var i=0;i<allData.length;i++){
                        //     // 把循环后的数据添加到处理数据的数组里
                        //     Arrdata.push(allData[i])
                        //      if((i != 0 && (i + 1) % 10 == 0) || i == allData.length - 1) {
                        //             //把currData加到allData里
                        //             grouping.push(Arrdata);
                        //             //在这里清空currData
                        //             Arrdata = [];
                        //         }
                        // }
                        /**
                         *   开始切割
                         */
                        // 队伍数组
                        let newGroupArr = [];
                        // 成员数组
                        let newMemberArr = [];
                        for (let i = 0; i < allData.length; i++) {
                            // 把成员加入到成员数组里
                            newMemberArr.push(allData[i])

                            if ((i != 0 && (i + 1) % 10 == 0) || i == allData.length - 1) {
                                // 把成员数组加入到队伍数组里
                                newGroupArr.push(newMemberArr);
                                // 清空数组
                                newMemberArr = [];
                            }
                        }
                        this.stuLists = newGroupArr
                        console.log("+++++++++++++++++++++++++++++++")
                        console.log(newGroupArr)
                        console.log("+++++++++++++++++++++++++++++++")
                    }
                    
                    console.log(this.stuLists)
                    console.log("-------------------------------------")
                    console.log(res)
                },(errRes)=>{
                    console.log(errRes)
                })
            },

            /**
             * 获取组数
             * 
             */
            getTeammGroup(){
                let teamsNumber = 6;
                let data = {};
                // 初始化数据
                this.stuLists = [];
                for(let index = 0; index<teamsNumber; index++){
                    data = {
                        tname:'姓名',
                        tphone:'手机',
                        tgender:'性别',
                        tdepartment:'子公司/部门',
                        tpostition:'职位',
                        stuLists:[]
                    }
                    for(let j = 0 ; j < 10; j++){
                        let data2 = {
                            studentNum:'学员'+(j+1),
                            name:'',
                            inviteMemberMobile:'',
                            gender:'',
                            department:'',
                            position:'',
                        }
                        data.stuDatas.push(data2);
                    }
                    this.stuLists.push(data);
                }
            },
        },
        computed: {

        },
        created() {

        },
        mounted() {
             this.getAllData();
        }
    };
</script>
